const path = require('path')
const webpack = require('webpack')

module.exports = {
  mode: 'none', // 指定打包模式，有 production, development, none
  // 指定 webpack 打包入口文件路径，若是相对路径，则不能省略 ./
  entry: './src/main.js',
  // 设置输出文件的位置
  output: {
    filename: 'bundle.js', // 指定输出文件名称
    path: path.join(__dirname, 'dist'), // 指定输出文件所在目录，必须是绝对路径
    publicPath: 'dist/' // 网站根目录, 斜线 / 不能省略
  },
  module: {
    // 对其他资源模块加载规则的配置，设置 test,use 属性
    rules: [
      {
        test: /.js$/,
        // use: 'babel-loader', // 用 babel-loader 替代默认的 loader，此时没有转换 es6
        use: {
          loader: 'babel-loader',
          options: {
            // presets: ['@babel/preset-env'] // 插件集合包含了全部 es 最新特性
            /**
             * 以下为尝试 babel-loader 与 tree-shaking 的冲突
             * 数组成员1: 使用的 preset 名称
             * 数组成员2: 给 preset 定义的配置对象
             */
            presets: [
              ['@babel/preset-env', {
                // modules: 'commonjs'  // 强制使用 commonjs （modules 默认为 auto，会根据环境判断是否开启 esmodule 插件）
                modules: false  // 设置为 false, 确保 preset-env 不会开启 esmodule 转换的插件
              }]
            ]
          }
        }
      },
      {
        test: /.css$/, // 处理打包过程遇到的文件路径
        // use: 'css-loader', // 指定匹配到的文件用到的 loader
        // 多个 loader 从后往前执行
        use: [
          'style-loader', // 将 css-loader 转换的结果通过 style 标签的形式追加到页面
          'css-loader', // 将 css 文件转换为 js 模块
        ]
      },
      {
        test: /.png$/,
        // use: 'file-loader',
        // use: 'url-loader', // 将 url 转换为 dataURLs
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 默认单位为字节，将 10kb 以下的文件交给 url-loader，超出的依然使用 file-loader
          }
        }
      },
      {
        test: /.html$/,
        // use: ['html-loader'],
        use: {
          loader: 'html-loader',
          options: {
            // attributes: ['img:src', 'a:href'] // 默认只有 img:src 属性，可添加 a:href,让其支持a的href
            // html-loader 1.3.x 需写成 list 的形式,直接写为上面数组形式会报错
            attributes: {
              list: [
                {
                  tag: 'img',
                  attribute: 'src',
                  type: 'src'
                },
                {
                  tag: 'a',
                  attribute: 'href',
                  type: 'src'
                }
              ]
            }
          }
        }
      }
    ]
  },
  plugins: [
    // 接收对象参数，对象的每个键值都会被注入到代码中
    new webpack.DefinePlugin({
      // 值要求的是一个代码片段
      API_BASE_URL: JSON.stringify('https://api.example.com')
    })
  ],
  // 集中配置 webpack 内部的优化功能
  optimization: {
    // usedExports: true, // 模块只导出外部使用的成员
    // concatenateModules: true, // 尽可能合并每一个模块到一个函数中
    // minimize: true, // 压缩输出结果
    sideEffects: true, // 开启处理副作用
  }
}